<template>
  <div class="app-container">
    <!--高级查询-->
    <div class="filter_container">
      <div class="filter_row">
        <el-form ref="form" :model="params" :inline="true" label-width="100px" size="mini">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="货主名称：">
                <el-input v-model="params.carrierName"  maxlength="20" @keyup.enter.native="handleFilter" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!--操作按钮-->
    <div class="operation_container">
      <ul>
        <li><el-button v-waves type="primary" icon="el-icon-search" size="mini" @click="handleFilter">查询</el-button></li>
<!--        <li><el-button v-waves type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="handleAdd()">新增</el-button></li>-->
      </ul>
    </div>
    <!--栅格-->
    <div class="grid_container">
      <el-table
        ref="singleTable"
        v-loading="grid.loading"
        :data="page.rows"
        element-loading-text="Loading"
        border
        stripe
        fit
        highlight-current-row
      >
        <el-table-column type="selection" align="center" width="40" />
        <el-table-column align="center" label="序" width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="webUrl" label="资质证明照片" align="center" show-overflow-tooltip >
          <template slot-scope="scope">
            <el-image
              :src="scope.row.webUrl"
              :preview-src-list="[scope.row.webUrl]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="creditCode" label="统一社会信用代码编号" align="center" show-overflow-tooltip width="200" />
        <el-table-column prop="carrierTradeId" label="货主在交易系统编号" align="center" show-overflow-tooltip width="200"/>
        <el-table-column prop="carrierName" label="货主公司名称" align="center" show-overflow-tooltip width="200"/>
<!--        <el-table-column prop="carrierForShortName" label="货主公司简称" align="center" show-overflow-tooltip />-->
        <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip />
        <el-table-column prop="contact" label="联系人" align="center" show-overflow-tooltip />
        <el-table-column prop="contactMobile" label="联系人手机号" align="center" show-overflow-tooltip />
        <el-table-column prop="legalRepresentative" label="法定代表人姓名" align="center" show-overflow-tooltip />
        <el-table-column prop="legalRepresentativeIdCard" label="法定代表人身份证号" align="center" show-overflow-tooltip />
        <el-table-column prop="legalRepresentativeMobile" label="法定代表人手机号" align="center" show-overflow-tooltip />
<!--        <el-table-column prop="openAccountBank" label="开户行" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="accountsOfBank" label="银行账户" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="active" label="是否认证通过" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="paymentTerm" label="付款周期" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="carrierSite" label="货主位置" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="isContractor" label="是否是承包商" align="center" show-overflow-tooltip />-->
<!--        <el-table-column prop="carrierDesc" label="货主描述" align="center" show-overflow-tooltip />-->
        <el-table-column prop="legalRepresentativeMobile" label="法定代表人手机号" align="center" show-overflow-tooltip />
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 'pending'" @click="handleChangeStatus(scope.row.id, true,'passed')"  >通过</el-button>
            <el-button v-if="scope.row.status === 'pending'" @click="handleChangeStatus(scope.row.id,false,'unpassed')"  >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div>
      <el-pagination
        v-show="page.total > 0"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        :total="page.total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import appConfig from '@/config/AppConfig'
import appConstant from '@/constant/AppConstant'
import CarrierApi from '@/api/basic/CarrierApi'

export default {
  directives: {
    waves
  },
  data() {
    return {
      selects: {
        validStatusList: appConstant.validStatusList
      },
      params: {
        carrierName: ''
      },
      page: {
        currentPage: appConfig.page.currentPage,
        pageSize: appConfig.page.pageSize,
        pageSizes: appConfig.page.pageSizes,
        total: null,
        rows: null
      },
      grid: {
        loading: true
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 加载grid数据
      this.grid.loading = true
      CarrierApi.page(this.params, this.page).then(response => {
        this.page.total = response.data.total
        this.page.rows = response.data.rows
        this.grid.loading = false
      }, () => {
        this.grid.loading = false
      })
    },
    handleAdd() {
      this.$router.push({ path: '/basic/carrier/form' })
    },
    handleRemove(row) {
    },
    handleEdit(row) {
      this.$router.push({ path: '/basic/carrier/form/' + row.id })
    },
    handleFilter() {
      this.page.currentPage = appConfig.page.currentPage
      this.loadData()
    },
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.loadData()
    },
    handleCurrentChange(currentPage) {
      this.page.currentPage = currentPage
      this.loadData()
    },
    handleChangeStatus(id, actived, status) {
      const param = {
        id: id,
        active: actived,
        status: status
      }
      CarrierApi.changeStatus(param).then(response => {
        this.loadData()
      }, () => {
        this.grid.loading = false
      })
    }
  }
}
</script>
